<template>
  <view>
   <view class="header">
     <view class="back" @click="back()">
       <uni-icons type="left" size="20" color="#fff"></uni-icons>
     </view>
     <text>个人中心</text>
   </view>
    <view class="userInfo-container">
      <button class="image" @click="chooseImage()">
        <image :src="userInfo.avatar" mode=""></image>
      </button>
      <my-userInfoFixed title='昵称' :info='userInfo.nickName'></my-userInfoFixed>
      <my-userInfoFixed title='学号' :info='userInfo.studentId'></my-userInfoFixed>
      <my-userInfoFixed title='学院' :info='userInfo.collegeType' > </my-userInfoFixed>
      <my-userInfoBox title='手机号' :info='userInfo.phone' @handleClick='handleClick'></my-userInfoBox>
      <my-userInfoBox title='密码' info=" " @handleClick='handleClick'> </my-userInfoBox>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {

      };
    },
    methods: {
      ...mapMutations('my_user', ['updateUserInfo']),
     chooseImage(){
        uni.chooseImage({
        	success:async (chooseImageRes) => {
        		const tempFilePaths = chooseImageRes.tempFilePaths;
        		uni.uploadFile({
        			url: `http://localhost:8080/users/users/update/avatar/${this.userInfo.studentId}`, //仅为示例，非真实的接口地址
        			filePath: tempFilePaths[0],
        			name: 'avatar',
        			formData: {
        			},
              header:{
                token: this.token,
              },
        			success: (uploadFileRes) => {
        				console.log(uploadFileRes.data);
        			},
               fail: (err) => {  
                  // 接口调用失败的回调函数  
                  console.error('uploadFile fail:', err);  
                }  
        		});
        	}
        });
      },
      async chooseAvatar(e) {
        const userInfo = this.userInfo
        userInfo.avatar = e.detail.avatarUrl
        uni.$http.header = {
      'token': this.token,
      'Accept': '*/*',
      'Host': 'localhost:8080',
      'Connection': 'keep-alive',
      'Content-Type': 'multipart/form-data; boundary=--------------------------692883722126683542064884'
   }
        await uni.$http.post(`/users/users/update/avatar/${userInfo.studentId}`, {
          avatar: userInfo.avatar
        })
        console.log(this.userInfo.avatar);
        console.log(e.detail.avatarUrl);
        this.updateUserInfo(userInfo)
      },
     handleClick(){
       uni.navigateTo({
         url:'/subpkg/changeInfo/changeInfo'
       })
     },
      back() {
        uni.navigateBack()
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo','token'])
    }
  }
</script>

<style lang="scss">
  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color:#b6edaa ;
    color: #fff;
    
    .back{
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }
  
  .image {
    margin: 30rpx auto;
    padding: 0;
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }
</style>